<template>
	<div class="list" ref="wrapper">
	  <div>
		<div class="area">
	      <div class="title border-topbottom">当前城市</div>
	      <div class="button-list">
	    	  <div class="button-wrapper">
	    	    <div class="button">{{this.$store.state.city}}</div>
	    	  </div>
	      </div>
	    </div>
	 	<div class="area">
	 	  <div class="title border-topbottom">热门城市</div>
	 	  <div class="button-list">
	 		<div 
	 		  class="button-wrapper"
	 		  v-for="item of hot"
	 		  :key="item.id"
	 		  @click="handleCityClick(item.name)"
	 		  >
	 		  <div class="button">{{item.name}}</div>
	 		</div>
	 	  </div>
	 	</div>
	 	<div class="area"
	 	     v-for="(item, key) of cities" 
	 	     :key="key"
	 		 :ref="key"
	 	>
	      <div class="title border-topbottom">{{key}}</div>
	 	  <div class="item-list">
	 		<div
	 		  class="item border-bottom"
		      v-for="innerItem of item"
			  :key ="innerItem.id"
			  @click="handleCityClick(innerItem.name)"
	 		  >
	 			{{innerItem.name}}
	 		</div>
	 	  </div>
	    </div>
	  </div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default {
		name:  'CityList',
		props:{
			hot: Array,
			cities: Object,
			letter: String
		},
		methods:{
			handleCityClick(city){
				this.$store.commit('changeCity' ,city)
				this.$router.push('/')
			}
		},
		mounted(){
			this.scroll = new Bscroll(this.$refs.wrapper)
		},
		watch: {
			letter() {
				if (this.letter) {
					const element = this.$refs[this.letter][0]
					this.scroll.scrollToElement(element);
				}
			}
		}
	}
</script>

<style lang='stylus' scoped>
	@import '~styles/varibles.styl'
	  .border-topbottom
	    &:before
	      border-color: #777
	    &:after
	      border-color: #ccc  
	  .border-bottom
	    &:before
	       border-color: #aaa  
	  .list
	    overflow: hidden
	    position: absolute
	    left:0                                        
	    bottom:0                                        
	    right:0                                        
	    top:1.58rem
	    .title
	      line-height: .54rem
	      background: #eee
	      color: #666
	      padding-left: .2rem
	      font-size: .26rem
	    .button-list
	      padding: .1rem .6rem .1rem .1rem
	      overflow:hidden
	      .button-wrapper
	        float:left
	        width:33.3%
	        .button
	          margin: .1rem
	          text-align: center
	          border: .02rem solid #ccc
	          border-radius: .05rem
	          padding:.1rem 0
	  .item-list
	    .item
	      line-height: .76rem
	      padding-left: .2rem
</style>